require(['./config'], () => {
    require(['header', 'template', 'footer'], (header,template) => {
        class Shopcar {
            constructor () {
                this.renderList ().then(resolve=>{
                    this.checkesChange()
                    this.setAllCheck()
                    this.calcPrice()
                    this.cartNum()
                    this.cartRNum()
                    this.deleteCart()
                })
            }
            // 取数据 渲染列表
            renderList () {
                return new Promise(resolve => {
                    let cart = localStorage.getItem('cart')
                    if (cart) {
                        // 根据localStorage的购物车数据渲染列表
                        this.cart = JSON.parse(cart)
                        $('#cart-body').html(template('cart-body-template', { cart: this.cart }))
                        resolve()
                    } else {
                        // 购物车为空 渲染一个为空的div
                            // $('#empty-car').show()
                    }
                })
            }
            // 单选按钮绑事件
            checkesChange () {
                const _this = this
                $('.check').on('change', function () {
                    // 找到当前商品的id 根据id修改选中状态
                    const id = $(this).parents('ul').attr('data-id')
                    _this.cart = _this.cart.map(shop => {
                        // 自定义属性取到的是字符串类型 用prop取当前选框的checked属性 赋值给当前数据
                        if (shop.id == id) shop.check = $(this).prop('checked')
                        return shop
                    })
                    // 把修改后的cart再存进去
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    // 每一次单选改变的时候都要设置全选状态
                    _this.setAllCheck()
                    // 在数据修改完成之后重新计算总价
                    _this.calcPrice()
                })
            }
            // 全选
            setAllCheck() {
                // 找到全选按钮 判断shop布尔值 
                $('#allbutton').prop('checked', this.cart.every(shop =>{
                        return shop.check 
                }))
                localStorage.setItem('cart', JSON.stringify(this.cart))
                const _this = this
                $('#allbutton').on('change',function () {
                    _this.cart = _this.cart.map(shop => {
                        shop.check = $(this).prop('checked')
                        return shop
                    })
                    console.log(_this.cart)
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    $('.check').prop('checked', $(this).prop('checked'))
                    let check = $('.check')
                    _this.calcPrice()   
                })
            }
            // 计算总价
            calcPrice() {
                // 不管做了什么操作 都要同步到this.cart里 只需要从this.cart里计算总价
                // 在做了影响总价的操作的时候只要调用这个方法就行
                const totalPrice = this.cart.reduce((money, shop) => {
                    if (shop.check) money += shop.price * shop.count
                    return money
                }, 0)
                $('#payMoney').html(totalPrice)
            }
            // 数量加
            cartNum () {
                const _this = this
                // 获取按钮绑定点击事件
                $('.main-bottom-ul').on('click', '.jia', function () {
                    let cart = localStorage.getItem('cart') // 获取localStorate数据
                    const id = Number($(this).parents('.shop-top').attr('data-id'))
                    this.cart = JSON.parse(cart)
                    _this.cart = this.cart.map(shop => {
                        if (shop.id === id) {
                            shop.count += 1
                            let allNum = '￥' + shop.price * shop.count
                            let html = $(this).prev('.cartNum')
                            html.html(`${shop.count}`)
                            let html1 = $(this).parents().next('.xiaoji')
                            html1.html(`${allNum}`)
                        }
                        return shop 
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    _this.calcPrice()
                    header.calcCartCount()
                })
            }
            // 数量减
            cartRNum() {
                const _this = this
                $('.main-bottom-ul').on('click', '.jian', function () {
                    let cartNum = $(this).next('.cartNum')
                    if (cartNum.html() > 1) {
                        const id = $(this).parents('.shop-top').attr('data-id')
                        let cart = localStorage.getItem('cart')
                        cart = JSON.parse(cart)
                        _this.cart = cart.map(shop => {
                            if (shop.id == id) {
                                shop.count -= 1
                                let allNum = '￥' + shop.price * shop.count
                                let html = $(this).next('.cartNum')
                                html.html(`${shop.count}`)
                                let html1 = $(this).parents().next('.xiaoji')
                                html1.html(`${allNum}`)
                            }
                            return shop
                        })
                        localStorage.setItem('cart', JSON.stringify(_this.cart))
                        _this.calcPrice()
                        header.calcCartCount()
                    }
                })
            }
            // 删除
            deleteCart() {
                const _this = this
                $('.main-bottom-ul').on('click', '.delete', function () {
                    const id = $(this).parents('.shop-top').attr('data-id')
                    let cart = localStorage.getItem('cart')
                    cart = JSON.parse(cart)
                    cart = cart.filter((shop, index) => {
                        if (shop.id == id) {
                            cart.splice(index, 1)  // 删除当前index 
                            localStorage.setItem('cart', JSON.stringify(cart))
                        }
                    })
                    _this.renderList()
                    _this.calcPrice()
                    header.calcCartCount()
                })
            }
        }
        new Shopcar()
    })
})